import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {VictoryBar, VictoryChart, VictoryTheme} from 'victory-native';

const ws = new WebSocket('ws://host.com/path');
const data = [
  {quarter: '站点一', earnings: '报警'},
  {quarter: '站点二', earnings: '无异常'},
  {quarter: '站点三', earnings: '无异常'},
  {quarter: '站点四', earnings: '报警'},
  {quarter: '站点五', earnings: '无异常'},
  {quarter: '站点六', earnings: '报警'},
];

class VictoryNative extends React.Component {
  initPage() {
    ws.onopen = () => {
      ws.send('something');
    };
    ws.onmessage = e => {
      console.log(e.data);
    };
    ws.onerror = e => {
      console.log(e.message);
    };
    ws.onclose = e => {
      console.log(e.code, e.reason);
    };
  };

  componentDidMount(): void {
    this.initPage();
  }

  render() {
    return (
      <View style={styles.container}>
        <VictoryChart
          title="Legend"
          domainPadding={{x: 20}}
          animate={{duration: 200, easing: 'bounce'}}
          theme={VictoryTheme.material}
        >
          <VictoryBar
            animate={{
              onExit: {
                duration: 200,
                before: () => ({
                  _y: 0,
                  fill: '#53CAC4',
                  label: 'earnings',
                }),
              },
            }}
            style={{data: {fill: '#53CAC4'}}}
            data={data}
            x="quarter"
            y="earnings"
            alignment="middle"
            barRatio={0.6}
            labels={({datum}) => datum.earnings}
          />
        </VictoryChart>
      </View>
    );
  }
}

export default VictoryNative;
const styles = StyleSheet.create({
  container: {
    marginTop: 60,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5fcff',
  },
});
